<template>
     <div class="people-select text-normal after-line">
        <div class="title">
            选择推荐人
            <!-- <div>谁推荐给您</div>
            <div class="grey-text-color">首次购买选择推荐人</div> -->
        </div>
        <div class="outer-picker">
            <div class="people-picker-box">
                <div class="icon grey-text-color">&#xeb6d;</div>
                <input class="picker" :disabled="!canChange" @focus="onPeopleSelectBlur" v-model.trim="referrerKey"/>
            </div>
            <div class="options-box" v-if="peopleSelectOptionsVisible && selectedReferrList.length">
                <div class="inner">
                    <div class="item after-line" @click="onPeopleChange(item)" v-for="(item, index) in formatReferrList" :key="index">
                        {{item.name || item.nickname}}{{item.shortMobile}}
                    </div>
                </div>
            </div>
        </div>
        <div class="btn btn-mobile btn-white btn-normal fourth-border" v-if="canChange" @click="getReferrerList">搜索</div>
    </div>
</template>

<script>
// import {
//     debounce,
// } from '@/lib/utils';
import store from '@/store';
import {
    mapState,
} from 'vuex';

export default {
    name: 'ReferrerSelect',
    model: {
        prop: 'referrerKey',
        event: 'change',
    },
    props: {
        canChange: {
            type: Boolean,
            default: true,
        },
        referrerKey: {
            type: String,
        },
        shopId: {
            type: Array,
        },
    },
    data() {
        return {
            // referrerKey: '',
            peopleSelectOptionsVisible: false,
            debounceGetReferrerList: null,
        };
    },
    computed: {
        ...mapState('user', {
            referrer: state => state.referrer,
            referrerList: state => state.referrerList,
        }),
        selectedReferrList() {
            return this.referrerList && this.referrerList[this.referrerKey] ? [
                {
                    id: null,
                    nickname: '暂无推荐人邀请',
                },
            ].concat(this.referrerList[this.referrerKey]) : [
                {
                    id: null,
                    nickname: '暂无推荐人邀请',
                },
            ];
        },
        formatReferrList() {
            return this.selectedReferrList.map((item) => {
                return {
                    ...item,
                    shortMobile: item.mobile ? `（${item.mobile.slice(-4)}）` : '',
                };
            });
        },
    },
    watch: {
        referrerKey(val) {
            this.$emit('change', val);
        },
    },
    methods: {
        onPeopleSelectFocus() {
            this.peopleSelectOptionsVisible = true;
        },
        onPeopleSelectBlur() {
            this.peopleSelectOptionsVisible = false;
        },
        onPeopleChange(item) {
            // this.selectedReferrer = item;
            const referrerKey = item.name || item.nickname;
            this.$emit('referrerChange', item);
            this.$emit('change', referrerKey);
            // this.referrerKey = this.selectedReferrer.name || this.selectedReferrer.nickname;
            this.onPeopleSelectBlur();
            // console.log('selectedReferrer', referrerKey, item, this.referrerKey);
        },
        async getReferrerList() {
            store.commit('utils/startRequest');
            await store.dispatch('user/getReferrerList', {
                name: this.referrerKey,
                shopId: this.shopId,
            });
            // console.log('selectedReferrList', this.selectedReferrList, this.referrerKey);
            store.commit('utils/endRequest');
            this.onPeopleSelectFocus();
        },
    },
    created() {
        // this.debounceGetReferrerList = debounce(this.getReferrerList, 500);
    },
};
</script>

<style lang="less" scope>
@import "../../lib/style/mixins.less";

.people-select {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 30rpx;
    .outer-picker {
        position: relative;
        width: 300rpx;
        .people-picker-box {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-width: 180rpx;
            padding: 10rpx 10px;
            border: 2rpx solid #BBBBBB;
            border-radius: 10rpx;
            .icon {
                margin-right: 10px;
            }
            .picker {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: right;
            }
        }
        .options-box {
            position: absolute;
            z-index: 2;
            top: 32 * 2 + 10rpx;
            left: 0;
            background-color: @white-color;
            border: 2rpx solid #BBBBBB;
            border-radius: 10rpx;
            .inner {
                width: 300rpx;
                max-height: 500rpx;
                overflow-y: scroll;
                .item {
                    position: relative;
                    box-sizing: border-box;
                    width: 100%;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>
